import Vue from 'vue'
import Component from 'vue-class-component'
import './topicStyle.css'

@Component
export default class addTopicClass extends Vue {
  list = [{name: 'NIKE', img: 'http://ssfk-media01.oss-cn-shenzhen.aliyuncs.com/cnull/1511245104345/3.jpg'},
        {name: 'ADDIDAS', img: 'http://ssfk-media01.oss-cn-shenzhen.aliyuncs.com/cnull/1511253612653/ck.jpg'}]

  created() {
    this.wrapperHeight = document.documentElement.clientHeight
  }

  mounted() {
    // for (let i = 1; i <= 10; i++) {
    //   this.list.push(i)
    // }
  }

  get caculateHeight() {
    return 'height:' + this.wrapperHeight + 'px'
  }

  createItems() {
    const item = this.list.map((value, index) => {
      return <dl onClick={() => {
        this.handerImg(value)
      }}>
        <dd>{value.name}</dd>
        <dt><img src={value.img}/></dt>
      </dl>
    })
    return item
  }

  handerImg(value) {
    this.$store.commit('bgImg', value.img)
    this.$router.go(-1)
  }

  render() {
    return (
      <div class="content">
        <mt-header class="header" fixed title="选择专题背景">
          <router-link to="AddTopic" slot="left">
            <mt-button icon="back"></mt-button>
          </router-link>
        </mt-header>

        <div class="pageTopBottom" style={this.caculateHeight}>
          <div class="addTopicImg">
            {this.createItems()}
          </div>
        </div>
      </div>
    )
  }
}
